<template>

<div class="personal-list">
     <Tabs value="carOwner">
        <TabPane :label="item.label" :name="item.key" v-for='(item, index) of buildList' :key='index'>
            <Row :gutter='10'>
                <Col :span='mod.span || item.span' v-for='(mod, modIndex) of item.mods'  :key='modIndex'>
                    <div class="item">
                        <c-form-readonly-block :data='item.data || data' :label='mod.label' :keys='mod.keys'></c-form-readonly-block>
                    </div>
                </Col>
            </Row>
        </TabPane>
    </Tabs>
</div>

</template>

<script lang='ts'>
import { Component, Prop, Watch, Vue } from 'vue-property-decorator'
import {deepCopy} from '@/utils/tools'

@Component({})
export default  class personalList extends Vue{

    name:string = 'car-personal-list'

    @Prop()
    data

    get buildList(){
        let DSBeneficiaries = this.data['DSBeneficiaries'];
        let cache = deepCopy(this.conf);

        DSBeneficiaries.forEach((item, index) =>{

                cache.push({
                    
                    label: `受益人[${index+1}]`,
                    key: `DSB${index+1}`,
                    span: 8,
                    data: item,
                    mods: [

                        {
                            label: '人员名称',
                            keys: ['nickname', 'kind']
                        },
                        {
                            label: '证件类型',
                            keys: ['idCardKind']
                        },
                        {
                            label: '证件编号',
                            keys: ['idCardNumber']
                        },
                        {
                            label: '手机号码',
                            keys: ['phone']
                        },
                        {
                            label: '联系人',
                            keys: ['contact']
                        },
                        {
                            label: '联系地址',
                            keys: ['address']
                        },
                        
                    ]
                    
                })
        })
        
        return cache
    
    }
    
    conf:any = [

        {
            label: '车主',
            key: 'carOwner',
            span: 8,
            mods: [

                {
                    label: '人员名称',
                    keys: ['DSOnickname', 'DSOkind']
                },
                {
                    label: '证件类型',
                    keys: ['DSOidCardKind']
                },
                {
                    label: '证件编号',
                    keys: ['DSOidCardNumber']
                },
                {
                    label: '手机号码',
                    keys: ['DSOphone']
                },
                {
                    label: '联系人',
                    keys: ['DSOcontact']
                },
                {
                    label: '联系地址',
                    keys: ['DSOaddress']
                },

            ]
        },
        {
            label: '投保人',
            key: 'DSP',
            span: 8,
            mods: [

                {
                    label: '人员名称',
                    keys: ['DSPnickname', 'DSPkind']
                },
                {
                    label: '证件类型',
                    keys: ['DSPidCardKind']
                },
                {
                    label: '证件编号',
                    keys: ['DSPidCardNumber']
                },
                {
                    label: '手机号码',
                    keys: ['DSPphone']
                },
                {
                    label: '联系人',
                    keys: ['DSPcontact']
                },
                {
                    label: '联系地址',
                    keys: ['DSPaddress']
                },

            ]
        },
         {
            label: '被保人',
            key: ' DSA',
            span: 8,
            mods: [

                {
                    label: '人员名称',
                    keys: ['DSAnickname', 'DSAkind']
                },
                {
                    label: '证件类型',
                    keys: ['DSAidCardKind']
                },
                {
                    label: '证件编号',
                    keys: ['DSAidCardNumber']
                },
                {
                    label: '手机号码',
                    keys: ['DSAphone']
                },
                {
                    label: '联系人',
                    keys: ['DSAcontact']
                },
                {
                    label: '联系地址',
                    keys: ['DSAaddress']
                },

            ]
        }
        
    ]

    
    
    
}


</script>

<style scoped lang='scss'>

.personal-list{

    .item{
        margin-top: _intervals(2);
    }
}

</style>